<template>
	<div id="favorite" class="bg-assist">
		<sub-page-header title="商品收藏">
			<span v-if="favorites.length" @click="edit = !edit" slot="right">{{edit ? '完成' : '编辑'}}</span>
		</sub-page-header>
		<div v-if="favorites.length == 0" class="text-center" style="margin-top: 100px;">
		    <img class="none-trolley" src="../../assets/none_collect.png" alt="">
		    <div class="none-tip">您还未收藏任何商品~~
				<router-link to="/goods/search">马上挑选商品</router-link>
		    </div>
		</div>
		<div class="favorites">
			<el-row v-for="item in favorites" class="favorite" :key="item.id">
					<el-col :span="10">
						<el-checkbox v-show="edit" v-model="item.checked" class="radio"></el-checkbox>
						<router-link :to="'/goods/detail/'+item.product_id">
							<img class="thumbnail" :src="item.product.thumbnail" alt="">
						</router-link>
					</el-col>
					<router-link :to="'/goods/detail/'+item.product_id" tag="div">
						<el-col class="info" :span="14">
							<p>{{item.product.title}}</p>
							<p class="bottom">
								<span class="text-price">£{{item.product.price}}</span>
							</p>
						</el-col>
					</router-link>
			</el-row>
		</div>

		<div v-show="edit && favorites.length" class="footer">
			<el-checkbox class="radio" v-model="AllSelect" @change="checkAll"></el-checkbox>
			<button @click="removeAll" class="btn-normal pull-right">删除</button>
		</div>
		<div class="bottom-margin"></div>
	</div>
</template>

<script>
import api from '~/api/api.js';
import SubPageHeader from '~/components/SubPageHeader.vue';

export default {
	components : {
		SubPageHeader
	},
	data () {
		return {
			inLoading: false,
			edit: false,
			AllSelect: false,
			next_page: 1,
			total: 0,
			current_page: 0,
			favorites : []
		}
	},
	created () {
		let vue = this;
		this.loadData();
		window.addEventListener('scroll', () => {
			let element = document.body;
			if (element.scrollHeight - element.scrollTop === element.clientHeight) {
				this.loadData();
			}
		});
	},
	methods: {
		loadData () {
			var vue = this;
			if (this.next_page < 1 || this.inLoading) {
				return;
			}
			vue.inLoading = true;
			api.get(`/favorite/index?page=${this.next_page}`)
			.then(function (response) {
				vue.inLoading = false;
				let page = response.data;
				page.data.forEach(function (item) {
					item.checked = false;
				});
				vue.next_page = page.next_page;
				vue.total = page.total;
				vue.current_page = page.current_page;
				if (vue.current_page == 1) {
					vue.favorites = page.data;
				} else {
					vue.favorites = vue.favorites.concat(page.data);
				}
			})
			.catch(function () {
				vue.$message.warning('加载失败');
			});
		},
		checkAll (e) {
			let vue = this;
			this.favorites.forEach(function (item) {
				item.checked = vue.AllSelect;
			});
		},
		removeAll () {
			let vue = this;
			let ids = [];
			this.favorites.forEach(function (item) {
				if(item.checked) {
					ids.push(item.product_id);
				}
			})

			if (ids.length) {
				api.post('/favorite/remove_product', {
					ids: ids
				})
				.then(response => {
					this.$message.success('删除成功');
					for(let i=0; i < this.favorites.length; i++) {
						if (this.favorites[i].checked) {
							this.favorites.splice(i, 1);
							i--;
						}
					}
				})
				.catch(() => {
					this.$message.error('删除失败');
				});
			} else {
				vue.$message.warning('请选择要删除的收藏');
			}
		}
	}
}
</script>

<style scoped>
#favorite {
	min-height: 500px;
	margin-bottom: 60px;
}
.favorite {
	padding: 15px 10px;
	margin-bottom: 10px;
	background-color: #fff;
}

.favorite .radio {
	float: left;
	margin-top: 50px;
}

.favorite .thumbnail {
	margin:20px 5px 0px 5px;
	height: 84px;
	width: 84px;
}

.favorite .info {
	padding-top: 20px;
}

.footer {
	position: fixed;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 50px;
	line-height: 50px;
	box-shadow: 0px 0px 1px 2px #eaeaea;
	background-color: #fff;
	z-index: 99;
}

.footer button {
	height: 50px;
	border: none;
	padding: 0px 20px;
}

.footer .radio {
	margin-left: 15px;
}
</style>